body{
    margin: 0;
    padding: 0;
}

/* column:列
row：行 */

#cs{
    background-color: #616161;
    display: grid;
    width: 210px;
    border-radius: 15px;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 5%;
    padding: 20px;
    grid-gap: 15px;
    grid-template-columns: 60px 60px 60px;
    grid-template-rows: 60px 60px 60px 60px;
    grid-template-areas:"input input input"
                        "1 2 3"
                        "4 5 6"
                        "7 8 9"
    ;
}

#input{
    width: 200px;
    height: 60px;
    border-radius: 15px;
    margin: auto;
    background-color: #616161;
    grid-area: input;
    box-shadow:5px 5px 10px #616161 inset,-5px -5px 10px #212121 inset;
}

.button{
    background-color: #616161;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border-style: none;
    box-shadow:5px 5px 8px #616161,-5px -5px 8px #212121;
}

.button:active{
    box-shadow:5px 5px 8px #616161  inset,-5px -5px 8px #212121  inset;
}

#button1{
    grid-area: 1;
}

#button2{
    grid-area: 2;
}

#button3{
    grid-area: 3;
}

#button4{
    grid-area: 4;
}

#button5{
    grid-area: 5;
}

#button6{
    grid-area: 6;
}

#button7{
    grid-area: 7;
}

#button8{
    grid-area: 8;
}

#button9{
    grid-area: 9;
}